import { useLocation } from "react-router-dom"
import style from "./index.module.css"
import { Button, FloatButton } from "antd"
import { Score } from "../../compnents/Score"
import { Recommend } from "../../compnents/Recommend"
import { PageTitle } from "../../compnents/Title"
import { reqGetIssueByPage } from "../../api/issue"
import { useEffect, useState } from "react"
import { IssueCard } from "../../compnents/IssueCard"
export const SearchPage = () => {
  const location = useLocation()
  const [issueList, setIssueList] = useState<JSX.Element[]>([])
  const getIssueList = async () => {
    const { data } = await reqGetIssueByPage({
      current: 1,
      pageSize: 20,
      issueStatus: true,
      // 根据搜索框，进行搜索的内哦让那个
      issueTitle: location.state.searchValue,
    })
    const arr = data.data.map((item) => {
      return <IssueCard key={item._id} issueInfo={item}></IssueCard>
    })
    setIssueList(arr)
  }

  useEffect(() => {
    // 默认就是问答
    console.log(location.state)
    if (location.state.searchType === "issue") {
      getIssueList()
    }
  }, [location.state.searchValue, location.state.searchType])

  return (
    <>
      <div className={style.wrapper}>
        {/* 上面title */}
        <PageTitle title="搜索结果"></PageTitle>
        {/* 下面内容 */}
        <div className={style.content}>
          {/* 左侧区域 */}
          <div className={style.leftContent}>{issueList}</div>
          {/* 右侧区域 */}
          <div className={style.rightContent}>
            {/* 我要发问 */}
            <Button type="primary" block>
              我要发问
            </Button>
            {/* 推荐内容 */}
            <Recommend></Recommend>
            {/* 积分排行榜 */}
            <Score></Score>
          </div>
        </div>
      </div>
      <FloatButton.BackTop visibilityHeight={500} />
    </>
  )
}
